<!--
 * @Author: boyyang
 * @Date: 2022-01-29 18:38:30
 * @LastEditTime: 2022-02-12 22:35:22
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\views\blogDetail\components\blogDetail.vue
-->

<template>
    <!-- <div class="blog-detail"> -->
        <Background :url="props.blogBg">
            <div class="blog-content">
                <div class="article-detail">
                    <div class="blog-title">{{ props.blogTitle }}</div>
                    <v-md-editor v-model="props.blogContent" mode="preview"></v-md-editor>
                </div>
            </div>

            <div class="edit-blog-wrapper">
                <edit-blog
                    :is-show="isShoweditBlog"
                    :blog-title="props.blogTitle"
                    :blog-text="props.blogContent"
                    :blog-desc="props.blogDesc"
                    :blog-bg="props.blogBg"
                    :is-edit="true"
                    @submit="editSubmit"
                ></edit-blog>
            </div>

            <div class="menu-btn">
                <menu-change :buttons="buttons" @btn-click="btnClick"></menu-change>
            </div>
        </Background>
    <!-- </div> -->
</template>

<script lang="ts" setup>
import editBlog from '@/views/blog/components/editBlog.vue'
import { updateOneData, userMes } from '@/cloudbase'
import { useMessage } from '@/components/message'


interface IBlogDetailProps {
    backgroundUrl?: string;
    blogTitle?: string;
    blogContent?: string;
    blogDesc?: string;
    blogBg?: string;
    blogId?: string;
}

interface IBlogDetailEmits {
    (e: 'reload'): void
}

interface IBlogDetailEdit {
    blogTitle?: string;
    blogContent?: string;
    blogDesc?: string;
}

const router = useRouter()
const route = useRoute()
const message = useMessage()
const userInfo = userMes()

const _id = route.query.id as string

const props = withDefaults(defineProps<IBlogDetailProps>(), {})

const emits = defineEmits<IBlogDetailEmits>()

const isShoweditBlog = ref<boolean>(false)



const buttons = ref<any[]>([{ icon: 'icon-custom311' }])

watch(() => props.blogId, (n_id, o_id) => {
    if (n_id == userInfo?.uid) {
        buttons.value = [{ icon: 'icon-custom311' }, { icon: 'icon-bianji' }]
    }
})

const btnClick = (index: number) => {
    switch (index) {
        case 0:
            router.back()
            break
        case 1:
            isShoweditBlog.value = !isShoweditBlog.value
            break
        default:
            return
    }
}

const editSubmit = (data: any) => {
    let params = {
        blogTitle: data?.title,
        blogContent: data?.text,
        blogDesc: data?.desc,
        blogBg: data?.blogBg,
        time: new Date().getTime(),
    }

    updateOneData('usersBlog', _id, params).then((res) => {
        message.success('更新成功！')
        isShoweditBlog.value = false
        emits('reload')
    })
}

</script>

<style scoped lang="scss">
.blog-detail {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.blog-title {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 26px;
    color: whitesmoke;

    position: sticky;
    top: 0;
    z-index: 5;
    padding: 10px;

    background-color: rgba(61, 59, 79, 0.5);
}

.blog-content {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 2% 15% 1%;
}

.article-detail {
    box-sizing: border-box;
    width: 100%;
    height: 100%;

    padding: 0 45px 50px;

    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
}

.menu-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 1000px) {
    .blog-content {
        padding: 0;
    }

    .article-detail {
        padding: 0 0 50px;
    }
}
</style>
